<template>
  <div class="data-visualization-panel">
    <el-row>
      <el-col :span="24">
        <el-radio-group v-model="selectedType" @change="handleTypeChange">
          <el-radio-button label="sales">销量</el-radio-button>
          <el-radio-button label="orders">订单数</el-radio-button>
          <el-radio-button label="returns">退货退款统计</el-radio-button>
          <el-radio-button label="transactions">成交订单数</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-radio-group v-model="timeRange" @change="handleTimeRangeChange">
          <el-radio-button label="day">日</el-radio-button>
          <el-radio-button label="week">周</el-radio-button>
          <el-radio-button label="month">月</el-radio-button>
          <el-radio-button label="year">年</el-radio-button>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="lineChart" class="chart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div ref="barChart" class="chart"></div>
      </el-col>
      <el-col :span="12">
        <div ref="pieChart" class="chart"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div ref="funnelChart" class="chart"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      selectedType: 'sales',
      timeRange: 'day',
      lineChart: null,
      barChart: null,
      pieChart: null,
      funnelChart: null,
      salesData: {
        day: [120, 132, 101, 134, 90, 230, 210],
        week: [820, 932, 901, 934, 1290, 1330, 1320],
        month: [2400, 2500, 2700, 2800, 2600, 2800, 2700],
        year: [12000, 13000, 11000, 14000, 12500, 13000, 12000]
      },
      ordersData: {
        day: [30, 40, 45, 50, 35, 60, 45],
        week: [300, 400, 450, 500, 350, 600, 450],
        month: [1500, 1600, 1800, 1900, 1700, 1800, 1700],
        year: [7500, 8000, 9000, 10000, 8500, 9000, 8000]
      },
      returnsData: {
        day: [10, 15, 7, 20, 5, 25, 15],
        week: [100, 150, 75, 200, 50, 250, 150],
        month: [500, 600, 700, 800, 600, 700, 600],
        year: [2500, 3000, 2700, 3000, 2600, 2800, 2700]
      },
      transactionsData: {
        day: [100, 130, 100, 140, 90, 230, 200],
        week: [800, 900, 850, 900, 700, 1300, 800],
        month: [2300, 2400, 2700, 2800, 2600, 2800, 2700],
        year: [12000, 13000, 11000, 14000, 12500, 13000, 12000]
      }
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.initLineChart();
      this.initBarChart();
      this.initPieChart();
      this.initFunnelChart();
    },
    initLineChart() {
      const chartDom = this.$refs.lineChart;
      this.lineChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.salesData.day,
          type: 'line'
        }]
      };
      this.lineChart.setOption(option);
    },
    initBarChart() {
      const chartDom = this.$refs.barChart;
      this.barChart = echarts.init(chartDom);
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.ordersData.month,
          type: 'bar'
        }]
      };
      this.barChart.setOption(option);
    },
    initPieChart() {
      const chartDom = this.$refs.pieChart;
      this.pieChart = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            radius: '55%',
            data: [
              { value: 335, name: 'Direct' },
              { value: 310, name: 'Email' },
              { value: 234, name: 'Union' },
              { value: 135, name: 'Video' },
              { value: 1548, name: 'Search' }
            ]
          }
        ]
      };
      this.pieChart.setOption(option);
    },
    initFunnelChart() {
      const chartDom = this.$refs.funnelChart;
      this.funnelChart = echarts.init(chartDom);
      const option = {
        series: [
          {
            name: '访问来源',
            type: 'funnel',
            left: '10%',
            width: '80%',
            data: [
              { value: 60, name: '访问' },
              { value: 40, name: '咨询' },
              { value: 20, name: '订单' },
              { value: 80, name: '点击' },
              { value: 100, name: '展示' }
            ]
          }
        ]
      };
      this.funnelChart.setOption(option);
    },
    handleTypeChange(type) {
      this.selectedType = type;
      this.updateCharts();
    },
    handleTimeRangeChange(range) {
      this.timeRange = range;
      this.updateCharts();
    },
    updateCharts() {
      switch (this.selectedType) {
        case 'sales':
          this.lineChart.setOption({
            series: [{
              data: this.salesData[this.timeRange]
            }]
          });
          break;
        case 'orders':
          this.lineChart.setOption({
            series: [{
              data: this.ordersData[this.timeRange]
            }]
          });
          break;
        case 'returns':
          this.lineChart.setOption({
            series: [{
              data: this.returnsData[this.timeRange]
            }]
          });
          break;
        case 'transactions':
          this.lineChart.setOption({
            series: [{
              data: this.transactionsData[this.timeRange]
            }]
          });
          break;
      }
    }
  }
};
</script>

<style scoped>
.data-visualization-panel {
  margin: 20px;
}
.chart {
  width: 100%;
  height: 400px;
}
</style>
